<template>
  <div>
  <el-form>
    <!---------- 查询旅客信息 ------------>
    <el-form-item>
      <el-form :inline="true" ref="form" :model="form">
        <el-form-item>
          <el-input
            v-model="form.passengerName1"
            placeholder="旅客姓名"
            :clearable="true">
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="success" @click="passengerShows"
            >查询<i class="el-icon-search"></i></el-button>
            <el-button type="primary" @click="dialog.addDialogFormVisible = true">添加乘客</el-button>
          <el-button type="warning" @click="exportExcel">导出旅客数据</el-button>
        </el-form-item>
        </el-form>
      </el-form-item>
    <!---------- 旅客信息表格 ------------>
    <el-table
    :data="passengerList"
    border
    style="width: 100%"
    >
    <el-table-column
      prop="passengerName1"
      label="旅客姓名"
      width="150">
    </el-table-column>
    <el-table-column
      prop="passengerIdCard1"
      label="旅客身份证号码"
      width="150">
    </el-table-column>
    <el-table-column
      prop="passengerPhone1"
      label="旅客手机号码"
      width="150">
    </el-table-column>
    <el-table-column
      prop="passengerAge1"
      label="旅客年龄"
      width="150">
    </el-table-column>
    <el-table-column
      prop="passengerSex1"
      label="旅客性别"
      width="150">
    </el-table-column>
    <el-table-column
      fixed="right"
      label="操作"
      width="550">
      <template slot-scope="scope">
        <el-popconfirm title="确定删除吗？" @confirm="handleDelete(scope.row.passengerInformationId)">
          <el-button slot="reference" type="danger"  size="small">删除乘客信息</el-button>
        </el-popconfirm> 
        <el-button type="primary" @click="handleEdit(scope.row.passengerInformationId)" size="small">修改乘客信息</el-button>
      </template>
    </el-table-column>
  </el-table>
  <!---------- 添加旅客信息 ------------>
  <el-dialog title="添加旅客信息" :visible.sync="dialog.addDialogFormVisible" width="50%">
    <el-form :model="addForm">
      <el-form-item label="用户id" prop="userId" hidden>
        <el-input v-model="this.userId" clearable></el-input>
      </el-form-item>
      <el-form-item label="旅客姓名" prop="passengerName1">
        <el-input v-model="addForm.passengerName1"></el-input>
      </el-form-item>
      <el-form-item label="旅客身份证号码" prop="passengerIdCard1">
        <el-input v-model="addForm.passengerIdCard1"></el-input>
      </el-form-item>
      <el-form-item label="旅客手机号码" prop="passengerPhone1">
        <el-input v-model="addForm.passengerPhone1"></el-input>
      </el-form-item>
      <el-form-item label="旅客年龄" prop="passengerAge1">
        <el-input v-model="addForm.passengerAge1"></el-input>
      </el-form-item>
      <el-form-item label="旅客性别" prop="passengerSex1">
        <el-select v-model="addForm.passengerSex1" placeholder="请选择性别">
          <el-option label="男" value="男"></el-option>
          <el-option label="女" value="女"></el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
        <el-button @click="dialog.addDialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="addPassenger">确 定</el-button>
    </div>
  </el-dialog>
  <!---------- 修改旅客信息 ------------>
  <el-dialog title="修改旅客信息" :visible.sync="dialog.updateDialogFormVisible" width="50%">
    <el-form :model="updateForm">
      <el-form-item label="旅客id" prop="passengerInformationId" hidden>
        <el-input v-model="updateForm.passengerInformationId" clearable></el-input>
      </el-form-item>
      <el-form-item label="旅客姓名" prop="passengerName1">
        <el-input v-model="updateForm.passengerName1"></el-input>
      </el-form-item>
      <el-form-item label="旅客身份证号码" prop="passengerIdCard1">
        <el-input v-model="updateForm.passengerIdCard1"></el-input>
      </el-form-item>
      <el-form-item label="旅客手机号码" prop="passengerPhone1">
        <el-input v-model="updateForm.passengerPhone1"></el-input>
      </el-form-item>
      <el-form-item label="旅客年龄" prop="passengerAge1">
        <el-input v-model="updateForm.passengerAge1"></el-input>
      </el-form-item>
      <el-form-item label="旅客性别" prop="passengerSex1">
          <el-select v-model="updateForm.passengerSex1" placeholder="请选择性别">
          <el-option label="男" value="男"></el-option>
          <el-option label="女" value="女"></el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
        <el-button @click="dialog.updateDialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="updatePassenger">确 定</el-button>
    </div>
  </el-dialog>
  </el-form>
</div>
</template>
<script>
  export default {
    data() {
      return {
        form:{
          passengerName1:""
        },
        passengerList:[],
        addForm:{},
        updateForm:{},
        dialog:{
          addDialogFormVisible:false,
          updateDialogFormVisible:false
        },
      };
    },
    methods: {
      exportExcel() {   
        this.$axios
        .post("passengers/exportExcel", this.form,{responseType: 'blob'})
        .then((res) => {
          let fileName = res.headers["content-disposition"].split("=")[1];//得到后端生成的文件名          
          let url = window.URL.createObjectURL(new Blob([res.data]));
          let dom = document.createElement("a");
          dom.style.display = "none";
          dom.href = url;
          dom.setAttribute("download", fileName); //指定下载后的文件名，防跳转
          document.body.appendChild(dom);
          dom.click();
          // 释放内存
          dom.parentNode.removeChild(dom)
          window.URL.revokeObjectURL(dom.href);
        })
        .catch(function (error) {
          console.log(error);
        });
      },
      passengerShows(){
        this.$axios.post("passengers/getAll",this.form)
        .then(res=>{
          this.passengerList = res.data.data.passengerList
        })
      },
      addPassenger(){
        this.addForm.userId = this.userId;
        this.$axios.post("passengers/",this.addForm)
        .then(res=>{
          if(res.data.code==200){
            this.$message.success("添加成功");
            this.dialog.addDialogFormVisible = false;
            this.passengerShows();
          }
        })
      },
      updatePassenger(){
        this.$axios.put("passengers/",this.updateForm)
        .then(res=>{
          if(res.data.code==200){
            this.$message.success("修改成功");
            this.dialog.updateDialogFormVisible = false;
            this.passengerShows();
          }
        })
      },
      handleEdit(passengerInformationId){
        this.dialog.updateDialogFormVisible = true;
        this.$axios.get("passengers/getOne/"+passengerInformationId)
        .then(res=>{
          this.updateForm = res.data.data.passengerList;
        })
      },
      handleDelete(passengerInformationId){
        this.$axios.delete("passengers/"+passengerInformationId)
        .then(res=>{
          if(res.data.code==200){
            this.$message.success("删除成功");
            this.passengerShows();
          }else{
            this.$message.error("删除失败");
          }
        })
      }
    },
    created(){
      this.userId = JSON.parse(sessionStorage.getItem("userId"));
      this.form.userId = this.userId;
      this.passengerShows();
    }
  };
</script>